var loadConf = {
	animation : false,
	text : '玩命加载中,请稍候...',
//	color : '#DEF',
	maskColor : '#DEF',
	textStyle : {
		fontSize : 24
	}
}
var myChart;
function loadChartsByIdAction(infoId) {
	myChart = echarts.init(document.getElementById("container"));
	myChart.showLoading(loadConf);
	var aj = $.ajax({
		url : '/spider/api/charts/getChartsData.json?id=' + infoId,
		type : 'get',
		dataType : 'json',
		success : function(data) {
			loadOption(data);
		},
		error : function(data) {
			alert("异常！");
		}
	});
};
function loadChartsByTempAction() {
	var data = $('#myFrom').serialize();
	myChart = echarts.init(document.getElementById("container"));
	myChart.showLoading(loadConf);
	var aj = $.ajax({
		url : '/spider/api/charts/tempChartsData.json?',
		type : 'get',
		data : data,
		cache : false,
		dataType : 'json',
		success : function(data) {
			loadOption(data);
		},
		error : function(data) {
			alert("异常！");
			myChart.hideLoading();
		}
	});
};

/**
 * 
 * @param size 不是很重要,一共有多少个图例,如果图例大于10则需要准备更多的空间存放图例
 * @returns
 */
function getOption(size) {
	return {
		title : {
			text : ''
		},
		tooltip : {
			trigger : 'axis',
			textStyle:{
				fontSize: 10
			}
		},
		toolbox: {//工具栏,内置有导出图片，数据视图，动态类型切换，数据区域缩放，重置五个工具。
            feature: {//各工具配置项。
                dataView: {//数据视图工具，可以展现当前图表所用的数据，编辑后可以动态更新。
                    show: true,//是否显示组件。
                    readOnly: false
                },
                magicType:{//动态类型切换 示例：feature: { magicType: {type: ['line', 'bar', 'stack', 'tiled']}}
                    show:true,
                    type:['line', 'bar']
                },
                restore: {//配置项还原。
                    show: true
                },
                saveAsImage: {//保存为图片。
                    show: true
                }
            },
            x: 'left',                // 水平安放位置，默认为全图右对齐，可选为：
            y: 'top',  
        },
		legend : {
			orient: 'vertical',
			x : 'left',
			y : 30,
			textStyle:{
				fontSize: 12
			},
			itemGap: 2,
			itemWidth: 16,
			itemHeight: 12,
			type:'scroll',
			formatter: function (name) {
				return (name.length > 14 ? (name.slice(0,12)+"...") : name); 
			},
			data : []
		},
		grid : {
			left : '185px',
			right : '3%',
			bottom : '2%',
			top : '2%',
			containLabel : true
		},
		//toolbox : {
		//	feature : {
		//		saveAsImage : {}
		//	}
		//},
		xAxis : {
			type : 'category',
			boundaryGap : false,
			data : []
		},
		yAxis : {
			type : 'value'
		},
		series : []
	};
}

/**
 * 从 data 中获取图标信息
 * @param data
 * @param type = line / pie / china 等视图格式
 * @returns
 */
function loadOption(data, type) {
	var legendsSize = (data && data.rows) ? data.rows.length : 0;
	var charType = type || 'line';
	
	var xField = data.attachment["_group_x_field"];
	// 所有的 group_key, 一般与 url 中的值相同
	var groupKeyList = data.attachment["_group_by"];
	// 所有的 group_field, 一般与 url 中的值相同
	var groupFieldList = data.attachment["_group_fields"];
	var interval = data.attachment["_group_scope_interval"];
	var groupScopeList = data.attachment["_group_scope_list"];
	
	
	var option = getOption(legendsSize);

	var valueScopeStart = data.rows[0].value_scope_start;
	var valueScopeEnd = data.rows[0].value_scope_end;
	option.xAxis.data = groupScopeList || getXAxis(valueScopeStart, valueScopeEnd, interval);

	option.series = [];
	option.legend.data = [];
	// 循环每一行数据
	var legendSelected = option.legend.selected = {};
	for (var i = 0; i < data.rows.length; i++) {
		var row = data.rows[i];
		var name = "";
		for (var j = 0; j < groupKeyList.length; j++) {
			var groupKey = groupKeyList[j]
			if ("_" != groupKey && xField != groupKey) {
				name = name != "" ? name + "~" + row[groupKey] : row[groupKey];
			}
		}
		name = name != "" ? name + "." : name;
		for (var j = 0; j < groupFieldList.length; j++) {
			var groupField = groupFieldList[j]
			option.legend.data.push(name + groupField);
            legendSelected[name + groupField] = option.legend.data.length <= 10;
			option.series.push({
				name : name + groupField,
				type : charType,
				// stack : '总量',
				data : row[groupField]
			});
		}
	}
	myChart.setOption(option, true);
	myChart.hideLoading();
}

function getXAxis(valueScopeStart, valueScopeEnd, interval) {
	var values = [];

	if (typeof(valueScopeStart) == "string") {
		// 按日期补全
		var startX = new Date(valueScopeStart).getTime();
		var endX = new Date(valueScopeEnd).getTime();
		for (var i = 0, j = startX ; j <= endX ; i++, j += interval * 1000) {
			values[i] = dateFormatting(new Date(j), "yyyy-MM-dd");
		}
	} else if (typeof(valueScopeStart) == "number") {
		// 按数字补全
		var startX = valueScopeStart;
		var endX = valueScopeEnd;
		for (var i = 0, j = startX ; j <= endX ; i++, j += interval) {
			values[i] = j ;
		}
	}
	return values;
}